<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <title>新增设备</title>
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/deviceFilter.css">
</head>
<body >
<div id="app">
    <header>
        <h1>新增设备</h1>
        <a href="javascript:history.go(-1);location.reload()" class="back"></a>
    </header>


    <section id="main">
        <div class="plat-list">
            <div class="plat-item">
                <div class="plat-title h86 noborderb">*客户</div>
                <div class="inputDiv h86">
                    <input type="text" placeholder="请输入客户名称">
                </div>
                <a href="deviceMapPointing.html" class="location-icon"></a>
            </div>

            <div class="plat-item">
                <div class="plat-title h86">*控制器类型</div>
                <custom-select :list="list1"></custom-select>
            </div>

            <div class="plat-item marT0 borT0">
                <div class="plat-title h86 noborderb">*控制器编号</div>
                <div class="inputDiv h86">
                    <input type="text" placeholder="请输入控制器编号">
                </div>
            </div>

            <div class="plat-item">
                <div class="plat-title h86 noborderb">设备型号</div>
                <div class="inputDiv h86">
                    <input type="text" placeholder="请输入设备型号">
                </div>
            </div>

            <div class="plat-item marT0 borT0">
                <div class="plat-title h86 noborderb">设备编号</div>
                <div class="inputDiv h86">
                    <input type="text" placeholder="请输入设备编号">
                </div>
            </div>

            <div class="plat-item marT0 borT0">
                <div class="plat-title h86 noborderb">设备功率</div>
                <div class="inputDiv h86">
                    <input type="text" placeholder="请输入设备功率">
                </div>
            </div>

            <div class="plat-item">
                <div class="plat-title h86 noborderb">地区</div>
                <div class="inputDiv h86">
                    <input type="text" placeholder="请输入客户所在地区">
                </div>
            </div>

            <div class="plat-item marT0 borT0">
                <div class="plat-title h86 noborderb">行业</div>
                <div class="inputDiv h86">
                    <input type="text" placeholder="请输入客户所在行业">
                </div>
            </div>

            <div class="plat-item marT0 borT0">
                <div class="plat-title h86 noborderb">备注</div>
                <div class="inputDiv h86">
                    <input type="text" placeholder="请输入需要备注的内容">
                </div>
            </div>

            <div class="plat-item">
                <div class="plat-title h86 noborderb">创建人</div>
                <div class="inputDiv h86">
                    <input type="text" placeholder="请输入创建人名称">
                </div>
            </div>

            <div class="plat-item marT0 borT0">
                <div class="plat-title h86">创建日期</div>
                <div class="dateDiv">
                    <span class="startDate"><input type="date"></span>
                    ~
                    <span class="endDate"><input type="date"></span>
                </div>
            </div>


        </div>

        <div class="handleBtn">
            <a href="javascript:;">
                <div class="btn sureBtn">保存</div>
            </a>
        </div>

    </section>


    <!--底部主菜单导航栏-->
    <nav id="nav-wrap">
        <ul class="nav-list">
            <li class="nav-list-item">
                <a href="index.html">
                    <div class="nav-icon home-icon"></div>
                    <div class="nav-item-name">首页</div>
                </a>
            </li>
            <li class="nav-list-item cur">
                <a href="deviceList.html">
                    <div class="nav-icon device-icon"></div>
                    <div class="nav-item-name">设备</div>
                </a>
            </li>
            <li class="nav-list-item">
                <a href="events.html">
                    <div class="nav-icon event-icon"></div>
                    <div class="nav-item-name">事件</div>
                </a>
            </li>
            <li class="nav-list-item">
                <a href="mine.html">
                    <div class="nav-icon mine-icon"></div>
                    <div class="nav-item-name">我的</div>
                </a>
            </li>
            <li class="clear"></li>
        </ul>
    </nav>
</div>


<script src="js/lib/vue.min.js"></script>
<script type="text/javascript">
    //自定义一个全局组件custom-select
    Vue.component('custom-select',{
        data:function(){
            return {
                selectShow:false,
                val: ''
            }
        },
        template:'<div class="selectDiv h86">'+
        '<div class="selectInput fl"><input type="text" :value="val"></div>'+
        '<div class="select-btn fr" @click="selectShow=!selectShow"></div>'+
        '<custom-list :aaa="list" v-show="selectShow" @receive="changeValueHandle"></custom-list>'+
        '</div>',
        props:['list'],
        methods:{
            changeValueHandle:function(item){
                this.selectShow = false;
                this.val = item;
            }
        }
    });

    //自定义一个全局组件custom-list
    Vue.component('custom-list',{
        template:'<div class="layout">' +
        '<ul class="selectSub">'+
        '<li v-for="item in aaa" @click="selectValueHandle(item)">{{item}}</li>'+
        '</ul>' +
        '</div>',
        props:['aaa'],
        methods: {
            selectValueHandle:function(item){
                this.$emit('receive',item)
            }
        }
    });

    new Vue({
        el:'#app',
        data: {
            list1:['GPRS-DTU-300','普乐特控制器类型B','普乐特C','GPRS-DTU-300','普乐特控制器类型B','普乐特C','GPRS-DTU-300','普乐特控制器类型B','普乐特C']
        }
    })

</script>

</body>
</html>